<!--
    本周新增会员(宇)
 --->
<template>
    <div style="width:100%;height:100%;" id="this-week-news-user-con"></div>
</template>

<script>
const echarts = require('echarts');
export default {
    name: 'thisWeekNewsUser',
    data () {
        return {
            arry:[]
        };
    },
    created () {
        this.getData();
    },
    methods: {
        getData(){
            let self=this;
            self.$axios.get('/member/newnum').then((res) => {
                if (res.data.code==200){
                    self.arry  = res.data.data;
                    this.$nextTick(() => {
                        let newsUserChart = echarts.init(document.getElementById('this-week-news-user-con'));
                        let xAxisData = [];
                        let data1 = [];
                        let data2 = [];
                        for (let i = 0; i < 20; i++) {
                            xAxisData.push('类目' + i);
                            data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
                            data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
                        }
                        const option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                top: 0,
                                left: '2%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                data: [this.arry[0].date, this.arry[1].date, this.arry[2].date, this.arry[3].date, this.arry[4].date, this.arry[5].date, this.arry[6].date],
                                nameTextStyle: {
                                    color: '#c3c3c3'
                                }
                            },
                            //本周新增会员数据(宇)
                            series: [
                                {
                                    name: '新增会员人数',
                                    type: 'bar',
                                    data: [
                                        {value: this.arry[0].value, name:this.arry[0].date, itemStyle: {normal: {color: '#2d8cf0'}}},
                                        {value: this.arry[1].value, name:this.arry[1].date, itemStyle: {normal: {color: '#2d8cf0'}}},
                                        {value: this.arry[2].value, name:this.arry[2].date, itemStyle: {normal: {color: '#2d8cf0'}}},
                                        {value: this.arry[3].value, name:this.arry[3].date, itemStyle: {normal: {color: '#2d8cf0'}}},
                                        {value: this.arry[4].value, name:this.arry[4].date, itemStyle: {normal: {color: '#2d8cf0'}}},
                                        {value: this.arry[5].value, name:this.arry[5].date, itemStyle: {normal: {color: '#2d8cf0'}}},
                                        {value: this.arry[6].value, name:this.arry[6].date, itemStyle: {normal: {color: '#2d8cf0'}}}
                                    ]
                                }
                            ]
                        };

                        newsUserChart.setOption(option);

                        window.addEventListener('resize', function () {
                            newsUserChart.resize();
                        });
                    });
                }else {
                    self.$router.push({
                        name: 'error_500'
                    });
                }
            });
        }
    },

};
</script>
